<template>
    <div>
        <el-form align="left" :inline="true" ref="form" :model="form" label-width="80px" size="mini">
            <el-form-item label="数据匹配">
                <el-input v-model="form.jiShuFangXiang"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm('form')">重置</el-button>
                <el-button type="primary" @click="submitForm('form')">搜索</el-button>
                <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="添加口试题" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="技术方向" :label-width="formLabelWidth">
                    <el-select @focus="selectJishu" v-model="form.fangxiang" placeholder="请选择技术方向">
                        <el-option v-for="item in jishu" :label="item.jiShuFangXiang" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在城市" :label-width="formLabelWidth">
                    <el-select @focus="selectCity" v-model="form.city" placeholder="请选择所在城市">
                        <el-option v-for="item in city" :label="item.chengShiMingCheng" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司名称" :label-width="formLabelWidth">
                    <el-autocomplete
                            :debounce = 0
                            value-key="gongSiMingCheng"
                            class="inline-input"
                            v-model="state2"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            :trigger-on-focus="false"
                            @select="handleSelect"
                    ></el-autocomplete>
                </el-form-item>
                <el-button @click="addKoushi">添加口试题</el-button>
                <el-form-item v-for="item in koushitiNum" :key="item.keyNum" label='口试题' :label-width="formLabelWidth">
                    <Autocomplete/>
                    <el-button @click="delKoushi(item.keyNum)">删除</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from '../http/http'
    import {chaXunJiShuFangXiang,chaXunChengShi,gongsiMohu} from '../http/api'
    import Autocomplete from'../components/Autocomplete'
    export default {
        name: "Koushiguanli",
        components:{
            Autocomplete
        },
        data(){
            return{
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    fangxiang:'',
                    city:'',
                    gongsi:{
                        id:'',
                        name:''
                    },
                    koushiti:[]
                },

                koushitiNum:[
                    {keyNum:1,id:'',value:''}
                ],

                formLabelWidth: '120px',
                jishu:[],
                city:[],
                state2:''
            };
        },
        methods:{
            selectXiala(url,data){
                axios({
                    url:url,
                    method:'get'
                }).then(res=>{
                    console.log(res.data)
                   this[data] = res.data.list
                })
            },
            selectJishu(){
                this.selectXiala(chaXunJiShuFangXiang,'jishu')
            },
            selectCity(){
                this.selectXiala(chaXunChengShi,'city')
            },
            querySearch(queryString, cb) {
                axios({
                    url:gongsiMohu,
                    params:{gongSiMingCheng :queryString},
                    method: 'post'
                }).then(res=>{
                    cb(res.data.list);
                })
            },
            handleSelect(item) {
                this.form.id = item.id
            },
            addKoushi(){
                this.koushitiNum.push({keyNum:this.koushitiNum[this.koushitiNum.length-1].keyNum+1,id:'',value:''})
            },
            delKoushi(key){
                console.log(key)
                this.koushitiNum = this.koushitiNum.filter(item=>{
                   return  item.keyNum !== key
                })
            }
        }
    }
</script>

<style scoped>

</style>